<template>
  <div class="root">

    <el-table :data="list" :lazy="true" @expand-change="clickRow" :header-cell-style="tableHeaderCell"
      :row-style="{ height: '60px' }" :cell-style="cellStyle">
      <el-table-column type="expand" v-if="expand">
        <template #default="props">
          {{ props.row.expandInfo }}
        </template>
      </el-table-column>
      <template v-for="(i, index) in headers" :key="i.field">
        <el-table-column v-if="!i.hidden" :label="i.headerName" :width="headers[index].width"
          :min-width="headers[index].minWidth" :fixed="headers[index].pinned" align="center">
          <template #default="scope" v-if="headers[index].cellRendererSelector">
            <component :is="getSelectorRes(index, scope.row).component" :updateFunc="updateFunc" :params="{
              data: getSelectorRes(index, scope.row).params
                ? getSelectorRes(index, scope.row).params
                : scope.row,
            }" />
          </template>
          <template #default="scope" v-else-if="headers[index].cellRenderer">
            <component :is="headers[index].cellRenderer" :updateFunc="updateFunc" :params="{ data: scope.row }" />
          </template>
          <template #default="scope" v-else-if="headers[index].decoration">
            <!-- <div :style="getDecoration(index,scope.row)">
              {{ getContent(index, scope.row) }}
            </div> -->
                      <!-- <div class="content"> -->
         <div class="ellipsis" :style="getDecoration(index,scope.row)">
              {{ getContent(index, scope.row) }}
            </div>
         <!-- <div class="fullscreen">
    <el-icon >
                <FullScreen />
              </el-icon>

            </div> -->

            <!-- </div> -->
          </template>
          <template #default="scope" v-else>
            <!-- <div class="content"> -->
      <div class="ellipsis">

              {{ getContent(index, scope.row) }}

            </div>
            <!-- <div class="fullscreen" @click="showDetail( getContent(index, scope.row) )">
    <el-icon >
                <FullScreen />
              </el-icon>

            </div> -->

            <!-- </div> -->


          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import { Header } from '@/components/table/table'
import useSettingStore from '@/vendors/store/setting'
const setting = useSettingStore()
const props = defineProps({
  columns: {
    type: Array<Header>,
    required: true,
  },
  cellStyle: {
    type: Object,
    default: { 'color': 'black', 'tont-size': '500', 'line-height': '80px' }
  },
  tableHeaderCell: {
    type: Function,
    default: () => {
      return {
        background: 'rgba(235, 235, 235, 1)',
        color: 'black',
        'height': '72px',
      }
    },
  },
  list: {
    type: Array<any>,
    required: true,
  },
  updateFunc: {
    type: Function,
    default: null,
  },
  tableId: {
    type: String,
    default: 'id', // 根据字段进行weight拖动
  },
  expand: {
    type: Boolean,
  },
  expandCal: {
    type: Function,
  },
})

const headers = props.columns
/**
 * 获取内容
 * @param index 列索引
 * @param row 表格行数据
 */
const getDecoration = (index: number, row: any) => {
  const header: Header = headers[index]
  if (header.decoration) {
    return header.decoration.call(null, { value: row[header.field as string] })
  }
}
const getContent = (index: number, row: any) => {
  const header: Header = headers[index]
  if (header.valueFormatter) {
    // 值格式化
    return header.valueFormatter.call(null, { value: row[header.field as string] })
  } else if (header.valueGetter) {
    // 值获取
    return header.valueGetter.call(null, { data: row })
  } else {
    // 直接返回值
    return row[header.field as string]
  }
}



// const maxHeight = document.body.clientHeight - 390

const getSelectorRes = (index: number, row: any) => {
  const header: Header = headers[index]
  return (header.cellRendererSelector as Function).call(null, { data: row })
}

const clickRow = (row: any, rows: any) => {
  if (props.expand) {
    props.expandCal?.call(null, row)
  }
}


</script>
<style lang="scss" scoped>
.root {
  height: calc(100vh - 450px);
  overflow-y: scroll;
}
.content{
  display:flex;
}
.ellipsis {
   margin-right:10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* 显示的行数 */
    max-height: 3em; /* 两行文本的高度 */
  }
  .fullscreen {
 cursor: pointer;
  }

</style>
